<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3Dlogo墙</title>
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="assets/js/jquery.min.js"></script>
</head>

<body>
    <div id="container" style="display:none;opacity: 0;"></div>
    <canvas class="canvas"></canvas>

    <script type="text/javascript">
        var hFont;
        /*** html节点字体大小随屏幕大小改变 ***/
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    hFont = 20 * (clientWidth / 320);
                    docEl.style.fontSize = hFont + 'px';
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
        function senddh() {
            $('.canvas').show();
            $('.canvas,#container').css('opacity', '1');
        }
        setTimeout(() => {
            senddh();
        }, 1000);

        var maxSignNum = 100;
        // 拼文字的头像缝隙
        window.AvatarGap = 15;
        // 拼文字的头像大小
        window.AvatarSize = 7;
        // 是否暂停
        window.isPause = false;
    </script>
    <script src="assets/js/theme2d.js"></script>
    <script src="assets/js/compress.js"></script>
    <script src="assets/js/three.js"></script>
    <script src="assets/js/tween.min.js"></script>
    <script src="assets/js/TrackballControls.js"></script>
    <script src="assets/js/CSS3DRenderer.js"></script>
    <script src="assets/js/3d.js"></script>
    <script>
        // 默认背景图
        var defaultBg = "assets/img/defaultbg.jpg";
        $("body").css("background", "url(" + defaultBg + ") center no-repeat");
        $("body").css("backgroundSize", "cover");
        // 默认头像
        var placeholder_image_arr = ["assets/img/default-avatar.jpg"];
        var signwall_show_str = "";
        var isStart = false;
        var return_array = new Array();
        var table = new Array();
        var personArray = [];
        var CurPersonNum = 0;

        var host = window.location.hostname;        
        connect();
        var socket;
        function connect() {
            try {
                console.log(host);
                socket = new WebSocket("ws://" + host + ":33664/2dLogo");
            }
            catch(e) {
                alert("error new WebSocket!");
                return;
            }
            socket.onopen = sOpen;
            socket.onerror = sError;
            socket.onmessage = sMessage;
            socket.onclose = sClose;
        }

        function sOpen() {
            var msgbody = "服务器连接成功";
            console.log(msgbody);
            var sendData = {
                "cmd": "page_ready"
            };
            socket.send(JSON.stringify(sendData));
        }

        function sError(e) {
            var msgbody = "websocket error:" + e;
            alert(msgbody);
        }

        function sMessage(msg) {
            var json = JSON.parse(msg.data);
            if (json.cmd === "pause") {
                // 最大签到人数
                if (json.data.show_count !== undefined) {
                    maxSignNum = json.data.show_count;
                }
                // 背景图
                if (json.data.background !== undefined) {
                    defaultBg = json.data.background;
                    $("body").css("background", "url(" + defaultBg + ") center no-repeat");
                    $("body").css("backgroundSize", "cover");
                }
                // 默认头像
                if (json.data.add_photo !== undefined) {
                    placeholder_image_arr = [json.data.add_photo];
                }
                if (json.personList !== undefined) {
                    if (!(json.personList instanceof Array)) {
                        json.personList = [];
                    }
                    personArray = json.personList;
                }
                // 主题文字
                if (json.data.logo_character !== undefined) {
                    signwall_show_str = json.data.logo_character;
                }
                isStart = true;
            }
        }

        function sClose(e) {
            var msgbody = "服务器连接关闭" + e.code;
            console.log(msgbody);
        }

        // 头像数量
        if (maxSignNum <= 50) {
            window.AvatarNum = 50;
        }
        else if (maxSignNum > 50 && maxSignNum < 150) {
            window.AvatarNum = 100;
        }
        else {
            window.AvatarNum = 150;
        }
    </script>

    <script>
        var themeTime = setInterval(function() {
            if (isStart) {
                S.Drawing.init('.canvas');
                /* 默认图片列表 */
                var placeholder_image_cnt = placeholder_image_arr.length;
                var placeholder_image_index = 0;
                var default_placeholder_image = placeholder_image_arr[0];
                var edit_personArray = new Array;
                var placeholder_image = default_placeholder_image;
                setTable();

                function setTable() {
                    var l = personArray.length;
                    for (var i = 0; i < window.AvatarNum; i++) {
                        table[i] = new Object();

                        if (l > 0) {
                            table[i] = personArray[i % l];
                            table[i].src = personArray[i % l].avatar;
                        } else {
                            if (placeholder_image_cnt > 0) {
                                if (placeholder_image_index >= placeholder_image_cnt) {
                                    placeholder_image_index = 0;
                                }
                                placeholder_image = placeholder_image_arr[placeholder_image_index];
                                placeholder_image_index++;
                            }
                            table[i].src = placeholder_image;
                        }
                        table[i].p_x = i % 20 + 1;
                        table[i].p_y = Math.floor(i / 20) + 1;
                    }

                    //打乱数组顺序
                    table = table.sort(function () { return Math.random() });
                }

                function getArrayItems(arr, num) {
                    //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
                    var temp_array = new Array();
                    for (var index in arr) {
                        temp_array.push(arr[index]);
                    }
                    //取出的数值项,保存在此数组
                    for (var i = 0; i < num; i++) {
                        //判断如果数组还有可以取出的元素,以防下标越界
                        if (temp_array.length > 0) {
                            //在数组中产生一个随机索引
                            var arrIndex = Math.floor(Math.random() * temp_array.length);
                            //将此随机索引的对应的数组元素值复制出来
                            return_array[i] = temp_array[arrIndex];
                            //然后删掉此索引的数组元素,这时候temp_array变为新的数组
                            temp_array.splice(arrIndex, 1);
                        } else {
                            //数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
                            return false;
                        }
                    }
                    return return_array;
                }
                getArrayItems(personArray, window.AvatarNum);
                S.init();
                S.UI.simulate(signwall_show_str);

                // 3d
                init();
                animate();
                transform(targets.table, 2000, 'table', 10);
                isStart = false;
                clearInterval(themeTime);
            }
        }, 1000);
        
    </script>

</body>

</html>
